<template class="firstpage">
  <div>

    <div class="boxMargin" @click="ladingRegion">
      <el-card class="box-card">
        <el-row class="margin" :gutter="20">
          <el-col :span="8">
            <el-row>
              <el-col :span="8" class="inputName">是否有品牌：</el-col>
              <el-col :span="14">
                <el-select v-model="searchData.hasBrand" placeholder="请选择">
                  <el-option
                    v-for="task in customData.hasBrand"
                    :key="task.value"
                    :label="task.label"
                    :value="task.value"
                  />
                </el-select>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row>
              <el-col :span="8" class="inputName">是否有分类：</el-col>
              <el-col :span="14">
                <el-select v-model="searchData.hasCategory" placeholder="请选择">
                  <el-option
                    v-for="task in customData.hasCategory"
                    :key="task.value"
                    :label="task.label"
                    :value="task.value"
                  />
                </el-select>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row>
              <el-col :span="8" class="inputName">是否有主图：</el-col>
              <el-col :span="14">
                <el-select v-model="searchData.hasThumbImage" placeholder="请选择">
                  <el-option
                    v-for="task in customData.hasThumbImage"
                    :key="task.value"
                    :label="task.label"
                    :value="task.value"
                  />
                </el-select>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row class="margin" :gutter="20">
          <el-col :span="8">
            <el-row>
              <el-col :span="8" class="inputName">是否有商品图：</el-col>
              <el-col :span="14">
                <el-select v-model="searchData.hasImage" placeholder="请选择">
                  <el-option
                    v-for="task in customData.hasImage"
                    :key="task.value"
                    :label="task.label"
                    :value="task.value"
                  />
                </el-select>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row>
              <el-col :span="8" class="inputName">是否有文描：</el-col>
              <el-col :span="14">
                <el-select v-model="searchData.hasDesc" placeholder="请选择">
                  <el-option
                    v-for="task in customData.hasDesc"
                    :key="task.value"
                    :label="task.label"
                    :value="task.value"
                  />
                </el-select>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row>
              <el-col :span="8" class="inputName">是否有ItemNbr：</el-col>
              <el-col :span="14">
                <el-select v-model="searchData.hasItemNbr" placeholder="请选择">
                  <el-option
                    v-for="task in customData.hasItemNbr"
                    :key="task.value"
                    :label="task.label"
                    :value="task.value"
                  />
                </el-select>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row class="margin" :gutter="20">
          <el-col :span="8">
            <el-row>
              <el-col :span="8" class="inputName">是否有upc：</el-col>
              <el-col :span="14">
                <el-select v-model="searchData.hasUpc" placeholder="请选择">
                  <el-option
                    v-for="task in customData.hasUpc"
                    :key="task.value"
                    :label="task.label"
                    :value="task.value"
                  />
                </el-select>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row>
              <el-col :span="8" class="inputName">是否有属性：</el-col>
              <el-col :span="14">
                <el-select v-model="searchData.hasItemAttr" placeholder="请选择">
                  <el-option
                    v-for="task in customData.hasItemAttr"
                    :key="task.value"
                    :label="task.label"
                    :value="task.value"
                  />
                </el-select>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row class="margin">
          <el-col :span="24" class="right">
            <el-button type="success" @click="onSearch">查询</el-button>
            <el-button @click="onReset">清空</el-button>
          </el-col>
        </el-row>
      </el-card>
    </div>

    <div class="boxMargin">
      <el-card class="box-card">
        <div slot="header">
          <div class="contion-header" style="width:50%;">
            <span>商品数据同步检查管理列表</span>
          </div>
        </div>
        <div>
          <el-table
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column prop="id" label="id" />
            <el-table-column prop="goodsName" label="商品名称" />
            <el-table-column prop="itemNbr" label="hostItem" />
            <el-table-column prop="upcCpde" label="hostUpc" />
            <el-table-column prop="brandName" label="品牌名称" />
            <el-table-column prop="categoryName" label="分类名称" />
            <el-table-column prop="hasThumbImage" label="是否有主图" />
            <el-table-column prop="hasImage" label="是否有商品图" />
            <el-table-column prop="hasDesc" label="是否有文描" />
            <el-table-column prop="hasItemAttr" label="是否有属性" />
          </el-table>
        </div>
      </el-card>
    </div>

    <div class="marginTop20 center">
      <template>
        <PAGER ref="wptxPager" @search="onChangePage" />
      </template>
    </div>
  </div>
</template>

<script>

import _validate from '../../../../framework/commonJs/wptx_validate'
import _tools from '../../../../framework/commonJs/wptx_tools'
import _api from '@/framework/API/checkSyncItem'
import { PAGER } from '@/framework/commonTemplate/'

const _FUNCTION_NAME = ''
export default {
  components: { PAGER },
  filters: {},

  data() {
    return {

      tableData: [],

      searchData: {
        hasBrand: '',
        hasCategory: '',
        hasThumbImage: '',
        hasImage: '',
        hasDesc: '',
        hasItemNbr: '',
        hasUpc: '',
        hasItemAttr: ''
      },

      searchDataBuffer: {
        hasBrand: '',
        hasCategory: '',
        hasThumbImage: '',
        hasImage: '',
        hasDesc: '',
        hasItemNbr: '',
        hasUpc: '',
        hasItemAttr: ''
      },

      pageData: {
        pageNo: 1,
        pageSize: 10,
        total: 1,
        pageSizes: [10, 20, 50, 100]
      },

      dialogData: {},

      historyData: {},

      infoData: {},

      filterText: '',
      customData: {
        hasBrand: [
          { label: '--请选择--', value: '' },
          { label: '是', value: 0 },
          { label: '否', value: 1 }
        ],
        hasCategory: [
          { label: '--请选择--', value: '' },
          { label: '是', value: 0 },
          { label: '否', value: 1 }
        ],
        hasThumbImage: [
          { label: '--请选择--', value: '' },
          { label: '是', value: 0 },
          { label: '否', value: 1 }
        ],
        hasImage: [
          { label: '--请选择--', value: '' },
          { label: '是', value: 0 },
          { label: '否', value: 1 }
        ],
        hasDesc: [
          { label: '--请选择--', value: '' },
          { label: '是', value: 0 },
          { label: '否', value: 1 }
        ],
        hasItemNbr: [
          { label: '--请选择--', value: '' },
          { label: '是', value: 0 },
          { label: '否', value: 1 }
        ],
        hasUpc: [
          { label: '--请选择--', value: '' },
          { label: '是', value: 0 },
          { label: '否', value: 1 }
        ],
        hasItemAttr: [
          { label: '--请选择--', value: '' },
          { label: '是', value: 0 },
          { label: '否', value: 1 }
        ],
        resultData: []
      },

      form: {},
      rules: {}
    }
  },

  computed: {},

  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },

  created() {
  },

  mounted() {
    this._FUNCTION_NAME = this.$route.name
    this.onInit()
  },

  /*       销毁前  （在实z销毁之前调用，实例仍然完全可用）       */

  beforeDestroy() {
  },

  methods: {

    onInit(data) {
      const self = this
      // _api.page(self, self.$refs.wptxPager.pageData, self.callBack_page, self.searchData);
    },

    onSearch() {
      const self = this
      const params = self.searchData
      self.searchDataBuffer = _tools.cloneObj(self.searchData)
      self.$refs.wptxPager.resetPageNo()
      if (_validate.checkEmpty(params.hasBrand) && _validate.checkEmpty(params.hasCategory) && _validate.checkEmpty(params.hasThumbImage) &&
                    _validate.checkEmpty(params.hasImage) && _validate.checkEmpty(params.hasDesc) && _validate.checkEmpty(params.hasItemNbr) &&
                _validate.checkEmpty(params.hasUpc) && _validate.checkEmpty(params.hasItemAttr)) {
        _validate.openTip(self, '检索条件不能为空', 'warning')
      } else {
        _api.page(self, self.$refs.wptxPager.pageData, self.callBack_page, params)
      }
    },

    onChangePage(data) {
      const self = this
      const params = self.searchDataBuffer
      _api.page(self, self.$refs.wptxPager.pageData, self.callBack_page, params)
    },

    onReset(data) {
      const self = this
      _tools.reset(self.searchData)
      _tools.reset(self.searchDataBuffer)
      self.onInit()
    },

    onAdd(data) {
    },

    onDelete(data) {
      const self = this
    },

    onInfo(data) {
      const self = this
    },

    onUpdate(data) {
      const self = this
    },

    onBathDelete() {
      const self = this
    },

    onBathUpdate() {
    },

    onUpload(data) {
    },

    onBathUpload() {
    },

    onExport(data) {
    },

    onDownload(data) {
    },

    onHistory(data) {
    },

    callBack_page(data) {
      const self = this
      if (_validate.checkEmpty(data)) {
        _validate.openTip(self, '返回数据为空', 'warning')
      } else {
        self.tableData = data.result
        self.$refs.wptxPager.updatePageData(data)
      }
    },
    /* callBack_pageMongoContent(data) {

                let self = this;
                if (_validate.checkEmpty(data)) {
                    _validate.openTip(self, "返回数据为空", "warning");
                } else {
                    self.customData.commoditiesDate = data.data;
                    self.$nextTick(function () {
                        self.form = data.data
                        self.$refs['form'].resetFields();
                    });
                }
            },*/

    ladingRegion() {
      this.customData.treeModel = false
    },
    handleSelectionChange(val) {
      this.customData.multipleSelection = val
    },
    commodTaskContent(data) {
      const self = this
      self.commodChange()
    },
    commodChange() {
      const self = this
      const params = {
        pageNo: self.pageData.pageNo,
        pageSize: self.pageData.pageSize
      }
      _api.pageMongoContent(self, params, self.callBack_pageMongoContent, self.customData.commodValue)
    }
  }
}
</script>
<style scoped>
    .contion-header {
        display: inline-block;
        box-sizing: border-box;
    }
    .tree-div {
        position: absolute;
        height: auto;

        z-index: 10;
        overflow-y: scroll;
        width: 58%;
        background: #EEE;
    }

    .tree {
        max-height: 200px;

        background: #EEE;
    }

    .el-card {
        overflow: visible;
    }
</style>
